export default {
    data() {
        return {
            myChart: null,
            option: {
                title: {
                    text: '总访问量',
                    //subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['访问量', '成功数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '访问量',
                        type: 'bar',
                        data: [12561,13325,10513,6287,11657,18745,23230,0,1167,17925,33264,21501],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '成功数',
                        type: 'bar',
                        data: [11210,13211,9991,5762,10627,17798,22215,0,1088,16617,32168,20021],
                        markPoint: {
                            data: [
                                {name: '年最高', value: 32168, xAxis: 10, yAxis: 33264},
                                {name: '年最低', value: 0, xAxis: 7, yAxis: 0}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            },
        }
    },
    mounted() {
        this.myChart = this.$echarts.init(document.getElementById('mychart'));
        this.myChart.setOption(this.option);
    }
}